<template>
	<view class="content">
		<image class="bg-img" src="../../static/index/img3.jpg"></image>
		<view class="form">
			<form ref="from" :modelValue="loginData">
				<view class="inputWrapper">
					<input class="input" type="text" name="userame" v-model="loginData.userName" placeholder="请输入学号" />
				</view>
				<view class="inputWrapper">
					<input class="input" type="password" name="password" v-model="loginData.password"
						placeholder="请输入密码" />
				</view>
				<view>
					<button class="btnValue" @click="submitForm()" type="primary">登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
				</view>
				<view>
					<navigator url="/pages/TeLogin/AuLogin">
						<button class="loginReg">授权登录</button>
					</navigator>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginData: {
					userName: '',
					password: ''
				},
			};
		},
		methods: {
			submitForm() {
				let msg = '';
				//判断是否输入密码
				if (!this.loginData.password) {
					msg = '请输入密码';
				}
				//判断是否输入学号
				if (!this.loginData.userName) {
					msg = '请输入学号';
				}
				//已输入学号和密码则请求后端
				if (!msg) {
					uni.request({
						url: 'https://backendth.flymi.top/login',
						data: this.loginData,
						method: "POST",
						success: (res) => {
							//200则密码学号正确登录成功
							if (res.data.code === 200) {
								uni.setStorage({
									key: 'studentnum',
									data: this.loginData.userName,
								});
								uni.setStorage({
									key: 'token',
									data: res.data.token.accessToken,
								});
								uni.setStorage({
									key: 'refreshToken',
									data: res.data.token.refreshToken,
									success: function() {
										wx.getUserProfile({
											lang: 'zh_CN',
											desc: '用于获取你的头像昵称',
											success: res => {
										         if (res.userInfo) {
													 wx.setStorageSync('nickName', res.userInfo.nickName)
													 wx.setStorageSync('avatarUrl', res.userInfo.avatarUrl)
													 uni.reLaunch({
													 	url: '/pages/index/index'
													 });
												 }
											},
											fail: err => {
												uni.showToast({
													title: '取消头像昵称授权',
													icon: "error",
													duration: 2000
												})
												uni.reLaunch({
													url: '/pages/index/index'
												});
											}
										})
									},
								})
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: "error",
									duration: 2000
								})
							}
						}
					});
				} else {
					uni.showToast({
						title: msg,
						icon: "error",
						duration: 2000
					})
				}
			}
		}

	}
</script>

<style>
	.content {
		width: 100vw;
	}

	.bg-img {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.avatarWrapper {
		height: 30vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.form {
		margin-top: 80px;
		height: 300px;
		margin-left: 5px;
		margin-right: 5px;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.1);
		padding-top: 50px;
	}

	.inputWrapper {
		width: 100%;
		height: 80upx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
		opacity: 0.9;
	}

	.inputWrapper .input {
		width: 250px;
		height: 100%;
		text-align: center;
		font-size: 15px;
	}

	.btnValue {
		color: white;
		width: 50%;
		height: 80upx;
		background: #55aaff;
		border-radius: 50upx;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		float: left;
		font-weight: bold;
	}

	.loginReg {
		color: white;
		width: 50%;
		height: 80upx;
		background: #55aaff;
		border-radius: 50upx;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		float: left;
		font-weight: bold;
	}
</style>
